/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="block-switch-cards">
        <div class="block-switch-card_list">
            <div class="block-switch-search">
                <sf-searchfield
                    v-model="cardKey"
                    placeholder="请输入关键字"
                    :default-width="234"
                    @trigger="emitSearchCard"
                    @clear="emitSearchCard" />
            </div>
            <div class="block-switch-card-total">
                <div
                    v-for="(card, index) in dataList"
                    :key="card.uuid"
                    class="block-switch-card"
                    :class="{'block-switch-card--active': index === activeIndex}"
                    @click="emitSwitchCard(card, index)">
                    <slot :record="card"></slot>
                </div>
            </div>
            <div class="block-switch-card_add"
                 :style="{height: calcAddCardHeight}"
                 @click="emitAddCard">
                <i class="icon iconfont iconxinzeng2"></i>
                <span>{{ addCardText }}</span>
            </div>
        </div>
        <div class="block-switch-card-content"
             :style="{width: `calc(100% - ${calcCardWidth} - 6px)`}">
            <slot name="content"></slot>
        </div>
    </div>
</template>

<style lang="less">
.block-switch-cards {
  height: 100%;
  display: flex;
}
.block-switch-search{
    margin: 10px 0 18px 0;
    width: 100%;
    .sfv-textfield_input{
        background: #364059;
        border: 1px solid #3D4866;
        border-radius: 16px;
        color: #c2c2c2;
        text-indent: 8px;
    }
    .icon-comp-search{
        color: #c2c2c2;
        margin-right: 5px;
    }
}

.block-switch-card_list {
//   display: inline-block;
  height: 100%;
  vertical-align: top;
  width: 240px;
  margin: 0 24px;
    //     overflow-y: auto;
    // overflow-x: hidden;
    padding-bottom: 24px;
    position: relative;
    .block-switch-card-total{
        height: calc(100% - 136px);
        overflow: auto;
    }
}

.block-switch-card {
  margin: 8px 0;
  width: 100%;
  height: 103px;
  cursor: pointer;
  background: #364059;
  border: 1px solid #3D4866;
    border-radius: 4px;
    color: rgba(255,255,255,0.50);
   
}

.block-switch-card--active {
      background: #364059;
    border: 1px solid #40A9FF;
    box-shadow: 0 2px 4px 0 rgba(63,169,255,0.40);
    .block-switch-card_title {
        color: #fff;
    }
}

.block-switch-card:hover {
      background: #364059;
    border: 1px solid #40A9FF;
    box-shadow: 0 2px 4px 0 rgba(63,169,255,0.40);
}

.block-switch-card_add {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
    background: #364059;
    border: 1px dashed #6C7FB2;
    border-radius: 4px;
    font-size: 14px;
    color: #C8D0E0;
    margin-top: 16px;
    position: absolute;
    bottom:32px;
    width: 240px;

  .icon {
    margin-right: 6px;
  }
}

.block-switch-card-content {
  display: inline-block;
  vertical-align: top;
  height: 100%;
}
</style>

<script>

/**
 * Created by zhb on 2020/8/26.
 */
import { v4 } from 'uuid';
export default {
    props: {
        cardWidth: {
            type: [Number, String],
            default: 240
        },

        data: {
            type: Array,
            default: () => []
        },

        displayField: {
            type: Array,
            default: () => []
        },

        // 默认第一项
        defaultActive: {
            type: Number,
            default: 0
        },

        addCardText: {
            type: String,
            default: _('新增')
        },

        addCardHeight: {
            type: [Number, String],
            default: 80
        }
    },

    data () {
        return {
            cardList: [],
            activeIndex: this.defaultActive,
            cardKey:'' // 搜索关键词
        };
    },

    computed: {
        calcCardWidth () {
            return typeof this.cardWidth === 'number' ?
                this.cardWidth + 'px' :
                this.cardWidth;
        },
        calcAddCardHeight () {
            return typeof this.addCardHeight === 'number' ?
                this.addCardHeight + 'px' :
                this.addCardHeight;
        }
    },

    watch: {
        defaultActive (value) {
            this.activeIndex = value;
        },
        data: {
            handler () {
                this._setUuid();
            },
            immediate: true
        }
    },

    methods: {
        emitSwitchCard (card, index) {
            this.$emit('switch', card);
            this.activeIndex = index;
        },
        emitSearchCard () {
            this.$emit('search');
        },
        emitAddCard () {
            this.$emit('add');
        },

        _setUuid () {
            this.dataList = this.data.map(item => {
                return { ...item, uuid: v4() };
            });
        }
    }
};
</script>
